 <template>
  <div>
    <el-tree :data="depts" :props="defaultProps" default-expand-all>
      <!-- 这里的data -->
      <template v-slot="{ data }">
        <el-row style="width:100%;height:40px" type="flex" justify="space-between" align="middle">
          <el-col>
            {{ data.name }}
          </el-col>
          <el-col :span="4">
            <span>{{ data.managerName }}</span>
          </el-col>
          <el-col :span="3">
            <el-dropdown>
              <span class="el-dropdown-link">
                操作<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <!-- 可以拿到data   id，pid也可以拿到了 -->
                <el-dropdown-item command="add" @click.native="handleMenuItem('add',data)">添加部门</el-dropdown-item>
                <el-dropdown-item command="edit" @click.native="handleMenuItem('edit',data)">修改部门</el-dropdown-item>
                <el-dropdown-item command="del" @click.native="handleMenuItem('del',data)">删除部门</el-dropdown-item>
                <!-- <el-popconfirm command="del" title="确定删除该部门吗？" @confirm="handleMenuItem('del', data)">
                  <el-dropdown-item slot="reference">删除部门</el-dropdown-item>
                </el-popconfirm> -->
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </template>
    </el-tree>
    <!-- 尽量用函数来接收   2.  -->
    <Operation :abc="showdialog" @submitdata="addepartment" @cancel="cancelShowDialog" :nodeId="cruentNodeId"
      ref="addRef" @getlist="getDepartment" />
  </div>
</template>
<script>
import Operation from './components/operation.vue'
import { transListToTreeData } from '@/utils/'
import { getDepartment, addepartment, delDepartmentDetail } from '@/api/department'
export default {
  name: 'department',
  components: { Operation },
  data() {
    return {
      cruentNodeId: 0,
      showdialog: false,
      depts: [],//接收接口的数据
      defaultProps: {
        label: 'name',//在页面显示的东西
        children: 'children',
      }

    };
  },
  created() {
    this.getDepartment()

  },
  methods: {
    async getDepartment() {
      try {
        const res = await getDepartment(); // 调用 API
        console.log('API 响应:', res); // 输出响应结果
        this.depts = transListToTreeData(res, 0); // 将响应传递给处理函数
        console.log(this.depts);


      } catch (error) {
        console.error('获取部门失败:', error);

      }
    },
    // 记一下 小驼峰 和大驼峰 
    // 示例  CancelShowDialog   大驼峰
    // 示例  cancelShowDialog   小驼峰
    // 一般方法名 用小驼峰
    // API地址可以用大驼峰
    cancelShowDialog() {
      this.showdialog = false
    },
    //data是表单，这里的pid就是子组件的this.node
    async addepartment(data, pid) {
      // 1.点击添加部门的时候,保存被点击部门id
      // 2.将被点击的部门id,传到子组件
      // 3.从子组件内部把id传出来
      // 照着1.2.3去做
      await addepartment({ ...data, pid })
      this.showdialog = false
      await this.getDepartment()



    },
    // 这里node就是data了，打印看见里面有id
    async handleMenuItem(type, node) {
      console.warn('type,', type)
      console.warn('node', node)
      //保存节点的id，存在 this.cruentNodeId，这个需要存储起来
      this.cruentNodeId = node.id
      if (type === 'add') {
        this.showdialog = true
        this.$refs.addRef.cleanMassage()
        this.getDepartment()

      } else if (type === 'edit') {
        this.cruentNodeId = node.id
        this.showdialog = true
        this.$nextTick(() => {
          this.$refs.addRef.getdepartmentdetail(this.cruentNodeId)
        })
      } else if (type === 'del') {

        await delDepartmentDetail(this.cruentNodeId)
        await this.getDepartment()

      }
    },
  }
};
</script>
<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.el-dropdown-link {
  margin-left: "200px";
}
</style>
